<template>
  <div class="app-container">
    <el-row :gutter="15">
      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>基本信息</span>
            </div>
          </template>
          <div>
            <div style="text-align: center; margin-bottom: 15px">
              <el-image
                class="active"
                :src="baseInfo.portrait || userPortrait"
              />
            </div>
            <div class="base-user-info">
              <div>
                姓名：
                <span>{{ baseInfo.userName }}</span>
              </div>
              <div>
                性别：
                <span>{{ baseInfo.userSex === 1 ? "女" : "男" }}</span>
              </div>
              <div>
                手机号：
                <span>{{ baseInfo.mobilePhone }}</span>
              </div>
              <div style="border-bottom: 1px solid #e3e9ed">
                注册日期：
                <span>{{ baseInfo.createTime }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="info">
              <el-form
                key="baseInfo"
                label-position="top"
                :model="baseInfoForm"
                label-width="100px"
                v-loading="formLoading"
              >
                <el-form-item label="姓名">
                  <el-input
                    v-model="baseInfoForm.userName"
                    placeholder="请输入姓名"
                    maxlength="64"
                  />
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input
                    v-model="baseInfoForm.mobilePhone"
                    placeholder="请输入手机号"
                    maxlength="13"
                  />
                </el-form-item>
                <el-form-item label="用户性别">
                  <el-select
                    v-model="baseInfoForm.userSex"
                    placeholder="请选择用户性别"
                  >
                    <el-option
                      v-for="item in SEX_OPTIONS"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-button type="primary" @click="updateUser()">
                  更新信息
                </el-button>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="修改密码" name="password">
              <el-form
                key="secret"
                label-position="top"
                :model="secret"
                label-width="100px"
                v-loading="formLoading"
              >
                <el-form-item label="原始密码">
                  <el-input
                    v-model="secret.password"
                    placeholder="请输入原始密码"
                    show-password
                    maxlength="256"
                  />
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input
                    v-model="secret.newPassword"
                    placeholder="请输入新密码"
                    show-password
                    maxlength="256"
                  />
                </el-form-item>
                <el-form-item label="再次输入密码">
                  <el-input
                    v-model="secret.confirmPassWord"
                    placeholder="请再次输入新密码"
                    show-password
                    maxlength="256"
                  />
                </el-form-item>
                <el-button type="primary" @click="updatePassword()">
                  更新密码
                </el-button>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import UserAPI from "@/api/system/base/user";
import { SEX_OPTIONS } from "@/enums/GlobalConst";
import { cloneDeep } from "lodash-es";
import userPortrait from "@/assets/images/user_portrait.png";

/** 个人中心 */
defineOptions({
  name: "Personal",
  inheritAttrs: false,
});

/** 用户基本信息 */
const baseInfoForm = ref<any>({
  userName: undefined,
  userSex: undefined,
  portrait: undefined,
  mobilePhone: undefined,
  createTime: undefined,
});

/** 用户基本信息 */
const baseInfo = ref<any>({
  userName: undefined,
  userSex: undefined,
  portrait: undefined,
  mobilePhone: undefined,
  createTime: undefined,
});
/** 用户基本信息 */
const secret = ref<any>({
  /** 原始密码 */
  password: "",
  /** 新密码 */
  newPassword: "",
  /** 确认密码 */
  confirmPassWord: "",
});
/** 卡片 */
const activeName = ref<string>("info");
const formLoading = ref<boolean>(false);

/** 更新用户信息 */
const updateUser = () => {
  let userInfo = {
    id: baseInfoForm.value.id,
    userName: baseInfoForm.value.userName,
    mobilePhone: baseInfoForm.value.mobilePhone,
    userSex: baseInfoForm.value.userSex,
  };
  UserAPI.putBaseUserApi(baseInfoForm.value.id, userInfo).then((res) => {
    if (res && res.status === 200) {
      ElMessage.success("更新成功");
      getUserInfo();
    }
  });
};

/** 修改密码 */
const updatePassword = () => {
  // 判断是否输入原始密码
  if (secret.value.password === "") {
    ElMessage.warning("请输入原始密码");
    return;
  }
  // 新密码是否一致
  if (secret.value.confirmPassWord !== secret.value.newPassword) {
    ElMessage.warning("新密码不一致，请检查新密码！");
    return;
  }
  // base64编码
  const password = btoa(secret.value.password);
  const newPassword = btoa(secret.value.newPassword);
  // 设置密码
  UserAPI.changePasswordApi({
    password: password,
    newPassword: newPassword,
  }).then((res) => {
    if (res && res.status === 200) {
      secret.value.password = undefined;
      secret.value.newPassword = undefined;
      secret.value.confirmPassWord = undefined;
      ElMessage.success("密码修改成功，请重新登陆！");
      getUserInfo();
    }
  });
};
/** 获取用户信息 */
const getUserInfo = () => {
  formLoading.value = true;
  UserAPI.getBaseUserApi()
    .then((res) => {
      const { data } = res;
      baseInfo.value = cloneDeep(data.baseUser);
      baseInfoForm.value = data.baseUser;
      // 设置头像
      let portrait = baseInfo.value.portrait;
      baseInfo.value.portrait = portrait;
      baseInfo.value.createTime = baseInfo.value.createTime.substring(0, 11);
    })
    .finally(() => {
      formLoading.value = false;
    });
};
/** 页面渲染完成后初始化 */
onBeforeMount(async () => {
  getUserInfo();
});
</script>

<style lang="scss" scoped>
// 左侧个人信息布局开始
.active {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.base-user-info {
  font-size: 14px;
  color: #999;
}
.base-user-info div {
  border-top: 1px solid #e3e9ed;
  height: 40px;
  line-height: 40px;
}
.base-user-info div span {
  float: right;
}
// 左侧个人信息布局结束

// 右侧绑定布局开始
.user-info-bind {
  font-size: 15px;
  color: #999;
  text-decoration: none;
}
.user-info-bind div {
  border-bottom: 1px solid #e3e9ed;
  height: 66px;
  line-height: 65px;
}
.title-bind {
  margin-left: 50px;
}
.edit-bind {
  float: right;
  cursor: pointer;
}
// 右侧绑定布局结束
</style>
